<script lang="ts" setup>
import { ref, render, useSlots, watch } from 'vue';
import { ProCardProps } from '../types';
import ProTabs from '../ProTabs/index.vue';
const slots = useSlots();

const emits = defineEmits<{
    (e: 'update:tabKey', value: string | undefined): void
}>();

const props = withDefaults(defineProps<ProCardProps>(), ({
    title: '标题',
    bordered: true,
    headerBordered: true,
    avatarAttrs: () => ({
        size: 'large',
        shape: 'round'
    })
}));

const innerTabs = ref<string | undefined>('');

watch(() => props.tabKey, (value) => {
    innerTabs.value = value;
})

watch(innerTabs, value => emits('update:tabKey', value));

</script>

<template>
    <div class="pro-card">
        <t-card :headerBordered="props.headerBordered" :bordered="props.bordered">
            <template #title>
                <div class="pro-card-title">
                    {{ props.title }}
                </div>
            </template>

            <template #subtitle>
                <div v-if="!slots.subTitle">{{ props.subTitle }}</div>

                <slot v-else name="subTitle"></slot>
            </template>

            <template v-if="slots.actions" #actions>
                <slot name="actions"></slot>
            </template>

            <template #default>
                <slot v-if="!props.tabs"></slot>
                <ProTabs :tabAttrs="props.tabsAttrs" :tabs="props.tabs" v-else v-model:tabKey="innerTabs">
                    <template v-if="slots.tabContent" #default="{ key }">
                        <slot name="tabContent" :key="key"></slot>
                    </template>
                </ProTabs>
            </template>

            <template v-if="props.avatarImage || slots.avatar" #avatar>
                <div class="pro-card-avatar">
                    <t-avatar v-if="!slots.avatar" v-bind="props.avatarAttrs" :image="props.avatarImage" />
                    <slot v-else name="avatar"></slot>
                </div>
            </template>

            <template v-if="slots.footer" #footer>
                <slot name="footer"></slot>
            </template>
        </t-card>
    </div>

</template>

<style scoped lang="scss">
::v-deep.pro-card {
    .t-card__body {
        padding: 0px 24px !important;
    }

    .t-card__header {
        padding: 8px 24px 0px 24px !important;
    }

    .pro-card-avatar {
        padding: 4px 0;
        text-align: center;
    }

    .pro-card-title {
        font-weight: normal;
    }

    .pro-card-sub-title {
        margin-inline-start: 8px;
        color: rgba(0, 0, 0, 0.65);
        font-weight: normal;
        font-size: 14px;
        white-space: nowrap;
    }
}
</style>
